<template>
    <div>
        <!-- //选择班级弹窗模块 -->

            <!--这里是要展示的内容层-->
            <div class="login">
                <img src="/images/delete.png" alt=""  class="popup_close" @click="popupClose" />
                <div class="popup_content" v-for="(item,andex) in HelpInfo" :key="andex">
                    <div class="popup_head">
                        <img :src="item.photo" alt="" class="head_photo">
                        <span class="head_name">{{item.full_name}}</span>
                        <el-rate v-model="item.score" disabled class="head_pingfen"></el-rate>
                        <span class="head_language">教学语言：{{item.teach_language}}</span>
                        <span class="head_serveType">{{item.service_type == 1?'线上服务':item.service_type == 2?'上门服务':'上门服务/线上服务'}}</span>
                    </div>
                    <div class="popup_info">
                        <span style="border-left: #47cecf solid 3px;padding-left: 6px;position: relative;left: 23px;">预约信息</span>
                        <label class="info_type">
                            <span>服务方式</span>
                            <el-select v-model="Classtypesvlaue" value-key="label" @change="ChangeClasstypes">
                            <el-option v-for="(item,indexa) in Classtypes" :key="indexa" :label="item.value" :value="item"></el-option>
                            </el-select>
                        </label>
                        <label class="info_time">
                            <span style="position: absolute;left: -444px;top: 7px;">服务时间</span>
                            <el-date-picker v-model="selectDatetime" type="datetime" placeholder="选择时间" @change="dataSearch" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" :picker-options="pickerOptions"></el-date-picker>
                        </label>
                        <label class="info_mobile" v-if="service_type == 2">
                            <span>预约手机号</span>
                            <input autocomplete="off" type="text" name="username" v-model="offline_mobile" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入手机号"/>
                        </label>
                        <label class="info_address" v-if="service_type == 2">
                            <span>地址</span>
                            <el-input v-model="offline_address" disabled placeholder="请输入住址" style="width: 81%;margin-left: 51px;"></el-input>
                            <img src="/images/椭圆 31@2x.png" @click="mapshow" alt="" class="adds">
                        </label>
                        <label class="info_mobile" style="margin-top: 11px;" v-if="service_type == 2">
                            <span>学生数</span>
                            <input autocomplete="off" type="text" name="username" v-model="student_count1" oninput="value=value.replace(/[^\d]/g,'')" placeholder="输入学生数"/>
                        </label>
                        <label class="info_classNum" style="margin-top: 8px;">
                            <span class="title">课时数</span>
                            <img src="/images/reduce.png" @click="jisuan(1)">
                            <span class="num">{{offline_count}}</span>
                            <img src="/images/add.png" @click="jisuan(2)">
                        </label>
                    </div>
                    <div class="popup_button">
                        合计：<span>￥{{offline_count*HelpInfo[0].charging_standard}}</span>
                        <div @click="yueke(item)">
                            确认预约
                        </div>
                    </div>
                </div>
            
        </div>
        <!--这里是半透明背景层-->
            <div class="over"></div>
        <Map v-show="Isshow" :Isshow.sync ='Isshow' :latitude.sync='latitude' :longitude.sync='longitude' :mechanism_addr.sync="offline_address"></Map>
    </div>
</template>
<script>
import Map from '../components/map'
export default {
    
    data(){
        return{
            pickerOptions: {
                // selectableRange: ['00:00:00 - 02:00:00'],  禁用得时间段
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7
                }
            },
            longitude:'',
            dialogFormVisible:false,
            mechanism_addr:'',
            latitude:'',
            mechanism_addrs:'',
            service_type:'',
            Classtypes: [
                {
                    label: "1",
                    value: "线上服务",
                    id: 1
                },
                {
                    label: "2",
                    id: 2,
                    value: "上门服务"
                }
            ],
            selectDatetime:'',
            offline_mobile:'',
            offline_mobile:'',
            student_count1:'',
            offline_address:'',
            Isshow:false,
            Classtypesvlaue: "",
            latitude:localStorage.getItem('latitude'),
            longitude:localStorage.getItem('longitude'),
            props:['popup'],
            HelpInfo:[],
            offline_count:1,
            languageList:[{
                languageE:"Estonian",
                languageC:"爱沙尼亚语"
                },
            {
                languageE:"Arabic",
                languageC:"阿拉伯语"
                },
            {
                languageE:"Bulgarian",
                languageC:"保加利亚语"
                },
            {
                languageE:"Polish",
                languageC:"波兰语"
                },
            {
                languageE:"Danish",
                languageC:"丹麦语"
                },
            {
                languageE:"German",
                languageC:"德语"
                },
            {
                languageE:"Russian",
                languageC:"俄语"
                },
            {
                languageE:"Traditional Chinese",
                languageC:"繁体中文"
                },
            {
                languageE:"French",
                languageC:"法语"
                },
            {
                languageE:"Finnish",
                languageC:"芬兰语"
                },
            {
                languageE:"Korean",
                languageC:"韩语"
                },
            {
                languageE:"Dutch",
                languageC:"荷兰语"
                },
            {
                languageE:"Czech",
                languageC:"捷克语"
                },
            {
                languageE:"romanian",
                languageC:"罗马尼亚语"
                },
            {
                languageE:"Portuguese",
                languageC:"葡萄牙语"
                },
            {
                languageE:"Japanese",
                languageC:"日语"
                },
            {
                languageE:"Swedish",
                languageC:"瑞典语"
                },
            {
                languageE:"slovenian",
                languageC:"斯洛文尼亚语"
                },
            {
                languageE:"Thai",
                languageC:"泰语"
                },
            {
                languageE:"Spanish",
                languageC:"西班牙语"
                },
            {
                languageE:"Greek",
                languageC:"希腊语"
                },
            {
                languageE:"hun",
                languageC:"匈牙利语"
                },
            {
                languageE:"Italian",
                languageC:"意大利语"
                },
            {
                languageE:"English",
                languageC:"英语"
                },
            {
                languageE:"Vietnamese",
                languageC:"越南语"
                },
            {
                languageE:"cantonese",
                languageC:"粤语"
                },
            {
                languageE:"Chinese",
                languageC:"中文"
            }],
        }
    },
    created(){
        var myDate = new Date();
    },
    mounted(){

    },
    components: {//组件注册
        Map
    },
    methods:{
        getYuekeInfo(id){
            console.log(id)
            var _this = this
            var data ={
                user_id	:id,
                type:'private_education',
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterInfo/queryTeachingCenter',
                params:data,
            }).then((res) =>{
                console.log(res.data.data)
                _this.HelpInfo = []
                res.data.data.map(item=>{
                    _this.languageList.map(itam=>{
                        if(item.teach_language == itam.languageE){
                            item.teach_language = itam.languageC
                        }
                    })
                })
                _this.HelpInfo.push(res.data.data[0])
                console.log(_this.HelpInfo,'==i')
            }).catch((error) =>{
                console.log(error)
            })
        },
        getListByDataTime(data) {

        },
        mapshow(){
            var _this = this
            _this.Isshow = true
        },
        dataSearch() {
            this.getListByDataTime();
        },
        yueke(item){
            //http://101.37.66.151:8768/eg-api/user/userAppointment/insert
            let _this = this
            console.log(item)
            console.log(_this.selectDatetime)
            _this.popup = true
            _this.languageList.map(itam=>{
                if(item.teach_language == itam.languageC){
                    item.teach_language = itam.languageE
                }
            })
            let d = new Date(_this.selectDatetime)
            let time = d.getTime()
                time = time + item.course_duration * _this.offline_count * 60 *1000
            let date = new Date(time);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            let Y = date.getFullYear() + '-';
            let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            let D = date.getDate()<10?'0'+date.getDate() + ' ':date.getDate() + ' ';
            let h = date.getHours()<10?'0'+date.getHours() + ':':date.getHours() + ':';
            let m = date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes();
            console.log(Y+M+D+h+m,'结束时间')

            let data = {
                earnings :_this.offline_count*item.charging_standard,
                end_time :Y+M+D+h+m+':00',
                language :item.teach_language,
                master_id :item.user_id,
                master_type :'private_education',
                offline_address :_this.offline_address,
                offline_count :_this.offline_count,
                offline_mobile :_this.offline_mobile,
                offset :'+8',
                service_type :_this.service_type == 1 ?'online':'offline',
                start_time :_this.selectDatetime.length< 19?_this.selectDatetime +':00':_this.selectDatetime,
                status :6,
                student_count :_this.student_count1,
                user_id :_this.unserinfo.user_id,
                latitude:_this.latitude,
                longitude:_this.longitude,
                mechanism_id :item.mechanism_id,
            }
            console.log(data)

            this.$axios({
            method:'post',
            url:'http://101.37.66.151:8768/eg-api/user/userAppointment/insert',
            data:data,
            }).then((res) =>{//给出用户反馈成功失败
                console.log(res)
                if(res.data.code == 0){
                    _this.$message('预约成功')
                    _this.offline_count = 1
                    _this.offline_address = ''
                    _this.offline_mobile = ''
                    _this.service_type = ''
                    _this.selectDatetime = ''
                    _this.student_count = ''
                    _this.popup = false
                }
                

            }).catch((error) =>{
            console.log(error)
            })
        },
        initData(data) {
            //获取当前时间
            var now   = new Date();
            var monthn = now.getMonth()+1;
            var yearn  = now.getFullYear();
            var dayn = now.getDate();
            var h = now.getHours();
            var m =now.getMinutes();
            var s = now.getSeconds();
            this.selectDatetime = yearn+"-"+monthn+"-"+dayn+" "+h+":"+m+":"+s;

            this.selectUser = parseInt(sessionStorage.getItem("userid"));
            this.getListByDataTime();
        },
        jisuan(type){
            if(type == 1){
                if(this.offline_count < 2){
                    this.$message('不能小于1')
				}else{
					this.offline_count = this.offline_count - 1
				}
            }else if(type == 2){
                this.offline_count = this.offline_count + 1
            }
        },
        ChangeClasstypes(e) {
            this.service_type = e.label;
        },
        popupClose(){
            this.popup = false
            this.$emit("update:popup",this.popup)
        },
        popupOpen(item){
            let _this = this
            console.log('打开约课')
            _this.popup = true
        },
  }
}
</script>
<style lang="less" scoped>
    .popup_button{
    text-align: center;
    position: absolute;
    bottom: 30px;
    width: 100%;
    font-size: 19px;
    span{
        color: #ff0000;
    }
    div{
        display: inline;
        background-color: #4078F7;
        color: #fff;
        padding: 8px;
        font-size: 16px;
        margin-left: 152px;
        border-radius: 10px;
        cursor: pointer;
    }
}
.info_address{
    display: block;
    width: 83%;
    text-align: left;
    height: 40px;
    position: relative;
    top: 62px;
    left: 22px;
    input {
        width: 57.5%;
        height: 30px;
        border: 1px solid #cecece;
        padding: 2px 10px 2px 10px;
        outline: none;
        margin-left: 12.5%;
        border-radius: 3px;
        cursor: no-drop;
    }
    .adds {
        width: 16px;
        height: 20px;
        cursor: pointer;
        position: absolute;
        left: 91%;
        top: 8px;
    }
}
.info_classNum{
    display: block;
    width: 80%;
    text-align: left;
    height: 40px;
    position: relative;
    top: 55px;
    left: 22px;
    .title {
        display: inline-block;
        width: 18%;
        height: 40px;
        line-height: 40px;
        text-align: left;
    }
    .num{
        font-size: 23px;
    }
    img{
        margin-left: 14px;
        width: 20px;
        height: 20px;
        margin-right: 14px;
        vertical-align: middle;
    }
}
.info_mobile{
    display: block;
    width: 84%;
    text-align: left;
    height: 40px;
    position: relative;
    top: 55px;
    left: 22px;
    span {
        display: inline-block;
        width: 18%;
        height: 40px;
        line-height: 40px;
        text-align: left;
    }
    input {
        width: 74.5%;
        height: 30px;
        border: 1px solid #cecece;
        padding: 2px 10px 2px 10px;
        outline: none;
        margin-left: 0.5%;
        border-radius: 3px;
    }
}
.info_time{
    height: 60px;
    align-items: center;
    position: relative;
    top: 80px;
    left: -46px;
    /deep/.el-input {
        width: 360px;
        position: relative;
        left: 150px;
        top: -33px;
    }
}
.info_type{
    height: 60px;
    align-items: center;
    position: relative;
    top: 37px;
    left: -46px;
    /deep/.el-select {
        width: 67%;
        border: #cecece;
        margin-left: 4%;
    }
    /deep/.el-select__tags{
        width: 40%;
    }
}
.popup_info{
    font-size: 15px;
    position: relative;
    top: 10px;
    left: 14px;
    width: 96%;
    height: 40px;        
}
.popup_head{
    width: 84%;
    height: 133px;
    background-color: rgba(214,226,236,1);
    padding: 10px;
    font-size: 15px;
    margin-left: 30px;
    border-radius: 20px;
    margin-top: -16px;
}
.head_pingfen{
    position: relative;
    top: -90px;
    left: 120px;
}
.head_photo{
    width: 100px;
    height: 130px;
    border-radius: 10px;
}
.head_name{
    position: relative;
    top: -101px;
    left: 26px;
    font-weight: bold;
    font-size: 18px;
}
.head_language{
    position: relative;
    top: -70px;
    left: 120px;
}
.head_serveType{
    background-color: #EA9919;
    padding: 7px;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    position: relative;
    top: -143px;
    left: 207px;
}
.popup_close{
    position: relative;
    top: 10px;
    left: 520px;
}
.login {
    position: fixed;
    font-size: 24px;
    height: 557px;
    width: 560px;
    background-color: #fdfdfd;
    border-radius: 1.25rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1003;
}
.over {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0.7; //透明度为70%
  filter: alpha(opacity=70);
  top: 0;
  left: 0;
  z-index: 1002;
  background-color: #111111;
}
</style>